<template>
	<view>
		<view class="header" id="header">
			<view class="u-p-20 search">
				<u-search :show-action="false" v-model="params.keyword" action-text="搜索" placeholder="请输入商品名称"
					:animation="true" margin="20rpx" searchIconShow="true" showAction="true" @click="searchGoodsName()"
					@clickIcon="searchGoodsName()" @search="searchGoodsName()" @custom="searchGoodsName()"></u-search>
				<u-icon name="scan" size="28px" @click="qRCodeSearch"></u-icon>
			</view>
		</view>
		<scroll-view :style="{ height: height + 'px' }" scroll-y="true" :scroll-with-animation="true"
			:enable-back-to-top="true" @scrolltolower="reachBottom">
			<u-checkbox-group v-model="checkboxCommodityIdArray" placement="column" @change="checkboxChange($event)">
				<view class="content">
					<view class="item-box" v-for="(item, index) in goodsList" :key="index"
						@click="fromBindingSelectGoods(item)">
						<view class="flex">
							<view>
								<u--image v-if="item.fileName != null && item.fileName != ''" :showLoading="true"
									:src="imgURL + item.fileName" width="140rpx" height="140rpx">
								</u--image>
								<u--image v-else :showLoading="true"
									:src="staticFileUrl+'/image/common/default_goods_image.svg'" width="140rpx"
									height="140rpx">
								</u--image>
							</view>
							<view class="u-m-l-10">
								<view class="font-9-28">{{ item.name }}</view>
								<view class="font-5-23 u-m-t-10">
									ID：{{ item.id }}</view>
								<view class="font-5-23 u-m-t-10">
									{{ item.retailPrice }}元
								</view>
							</view>
						</view>
						<u-checkbox v-if="ledger == 1" :name="item.id"></u-checkbox>
					</view>

					<u-empty v-if="goodsList.length == 0" text="暂无商品" mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png" />
				</view>
			</u-checkbox-group>
		</scroll-view>

		<view class="footer" id="footer">
			<view class="u-p-l-30 u-p-r-30 u-m-b-40 u-m-t-20" v-if="ledger == 1">
				<u-button shape="circle" color="rgb(96,114,255)" :customStyle="{height: '88rpx'}" text="确定分账商品"
					@click="confirmGoods()"></u-button>
			</view>
			<view class="u-p-l-30 u-p-r-30 u-m-b-40 u-m-t-20" v-else>
				<u-button shape="circle" color="rgb(96,114,255)" :customStyle="{height: '88rpx'}" text="添加商品"
					@click="navAddGoods()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//分账用的，选中的商品
				checkboxCommodityIdArray: [],

				imgURL: this.$configPath.imgURL,
				staticFileUrl: this.$configPath.staticFileUrl,
				goodsList: [],
				params: {
					pageNum: 1,
					pageSize: 10,
					totalPage: 1,
					keyword: '',
					type: ''
				},
				status: 'loading',
				delShow: false,
				content: `如果该商品有正在关联的设备，
				则不能删除。
					<br/>确定要删除该商品吗?`,
				height: 0,
				headerHeight: 0,
				footerHeight: 0,
				currClickGoodsId: '',
				from: '',
				ledger: -1,
			};
		},
		onReady() {
			this.getPomHeight();
		},
		onLoad(option) {
			if (option.from != null) {
				this.from = option.from;
			}
			if (option.type != null) {
				this.params.type = option.type;
			}
			console.log(option)
			if (option.ledger != null) {
				this.ledger = option.ledger;
			}
			if (option.checkboxCommodityIdArray != null && option.checkboxCommodityIdArray != "") {
				//截取数组，把字符串转换成数字模式
				this.checkboxCommodityIdArray = option.checkboxCommodityIdArray.split(',').map(Number);
				console.log(this.checkboxCommodityIdArray, ' this.checkboxCommodityIdArray this.checkboxCommodityIdArray')
			}
		},
		onShow() {
			this.params.pageNum = 1;
			this.goodsList.length = 0;
			this.findAllCommodityPage();
			this.delShow = false;
		},
		// 下拉事件
		onPullDownRefresh() {
			this.overloadData('refresh');
		},
		methods: {
			confirmGoods() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				// console.log(result,"result")
				// console.log(this.checkPlayList,"this.checkPlayList")
				//return
				prevPage.$vm.checkboxCommodityIdArray = this.checkboxCommodityIdArray; //修改上一页data里面的data参数值
				uni.navigateBack();
			},
			checkboxChange(e) {
				console.log('e', e)
				this.checkboxCommodityIdArray = e;
				console.log('选中商品ID', this.checkboxCommodityIdArray)
			},
			// 调用微信扫一扫
			qRCodeSearch() {
				uni.showLoading({
					title: "正在调起...",
					mask: true
				})
				var that = this;
				uni.scanCode({
					success: function(res) {
						uni.hideLoading();
						that.params.keyword = res.result;
						// console.log("进入了码",res.result)
						that.searchGoodsName();
					},
					fail(res) {
						console.log(res);
						uni.hideLoading();
					}
				});
			},

			fromBindingSelectGoods(item) {
				if ('twistedEgg' == this.from) {
					let param = {
						commodityId: item.id,
						name: item.name,
						fileName: item.fileName,
						retailPrice: item.retailPrice
					}
					setTimeout(() => {
						uni.$emit('selectGoodsMonitor', param)
					}, 500);
					this.$u.route({
						type: 'navigateBack'
					})
				} else if ('restock' == this.from) {
					setTimeout(() => {
						uni.$emit('restock', {
							commodityId: item.id,
						})
					}, 500);
					this.$u.route({
						type: 'navigateBack'
					})
				}
			},
			findAllCommodityPage(type) {
				this.$api('commodity.findAllCommodityPage', this.params)
					.then(res => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						if (res.status == 0) {
							this.pages = res.data.pages;
							this.status = res.data.list.length === 10 ? 'loadmore' : 'nomore';
							this.goodsList = [...this.goodsList, ...res.data.list]; //合并数组
						} else {
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					})
					.catch(() => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			},

			// 获取各个盒子的高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.select('#footer').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})

			},

			// 重新刷数据
			overloadData(type) {
				this.params.pageNum = 1;
				this.goodsList = [];
				uni.stopPullDownRefresh();
				this.findAllCommodityPage();
			},
			//清除关键字
			clearKeyword() {
				this.params.keyword = '';
			},
			//关键字搜索
			searchGoodsName() {
				this.overloadData();
			},
			//删除商品
			del(id) {
				console.log("删除商品", id)
				this.delShow = true;
				this.currClickGoodsId = id;
			},
			//跳转编辑页面
			edit(id) {
				uni.navigateTo({
					url: '/pages-other/goods/goods-edit?id=' + id
				});
			},
			//跳转新增商品页面
			navAddGoods() {
				uni.navigateTo({
					url: '/pages-commodity/goods2?type=2'
				});
			},
			//加载更多
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}

				this.status = 'loading';
				this.params.pageNum++;
				this.findAllCommodityPage();
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: rgb(247, 248, 247);
	}

	.header {
		background-color: #FFFFFF;

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-btn {
				width: 100rpx;
				margin-left: 20rpx;
			}
		}
	}

	.content {
		padding-bottom: 10rpx;

		.detail {
			margin-right: 30rpx;
		}

	}

	.slot-content {
		text-align: center;
	}

	.center {
		text-align: center;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 100;
	}

	.item-box {
		margin: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.flex {
		display: flex;
	}

	.font-9-28 {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.9);
	}

	.font-5-23 {
		color: rgba(0, 0, 0, 0.5);
		font-size: 23rpx;
	}

	.item-right-box {
		display: flex;
		align-items: center;
	}

	.edit-box {
		background: rgb(240, 240, 240);
		color: rgba(0, 0, 0, 0.9);
		border-radius: 6rpx;
		padding: 5rpx 20rpx;
		font-size: 23rpx;
	}

	.del-box {
		background: rgb(254, 64, 76);
		color: #FFFFFF;
		border-radius: 6rpx;
		padding: 5rpx 20rpx;
		font-size: 23rpx;
	}
</style>